<!-- 问题描述 -->
<template>
  <view>
    <aster-back font-color="#333" :show-title="true" :title="question?.title" />
    <view v-if="question">
      <view class="border-radius margin-top-sm" v-if="isEmpty(question.children)">
        <view class="question">
          <view class="title">
            <view class="question__label"> Q： </view>
            <view class="question__value">{{ question.title }}</view>
          </view>
          <view class="content">
            <view class="question__label"> A： </view>
            <view class="question__value">{{ question.content }}</view>
          </view>
        </view>
      </view>
      <view class="border-radius margin-top-sm" v-if="isNotEmpty(question.children)">
        <view v-for="(item, index) in question.children" :key="index">
          <view class="question">
            <view class="title">
              <view class="question__label"> Q： </view>
              <view class="question__value">{{ item.title }}</view>
            </view>
            <view class="content">
              <view class="question__label"> A： </view>
              <view class="question__value">{{ item.content }}</view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script setup lang="ts">
  import AsterBack from '@/components/common/aster-back.vue';
  import { ResultEnum } from '@/enums/httpEnum';
  import { getQuestionDetail } from '@/services/api/question/question';
  import { QuestionModel } from '@/services/model/questionModel';
  import { isEmpty, isNotEmpty } from '@/utils/is';
  import { onLoad } from '@dcloudio/uni-app';
  import { ref } from 'vue';

  const question = ref<QuestionModel>();

  onLoad((options: any) => {
    getQuestionDetail(options.id).then(({ data }) => {
      if (data.code == ResultEnum.SUCCESS) question.value = data.data;
    });
  });
</script>
<style lang="scss" scoped>
  page {
    padding: 0 20rpx;
  }

  .question {
    background-color: #fff;
    margin-top: 20rpx;
    margin-bottom: 20rpx;
    padding: 20rpx;

    .title {
      font-size: 28rpx;
      font-weight: bold;
      display: flex;
      flex-direction: row;
    }
    .content {
      font-size: 26rpx;
      color: #bbb;
      display: flex;
      flex-direction: row;
    }

    &__label {
      width: 8%;
      display: flex;
      justify-content: flex-end;
    }

    &__value {
      width: 92%;
      display: flex;
      justify-content: flex-start;
    }
  }
</style>
